<template>
  <div>
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :with-header="false">
      <div v-for="(item, index) in tableData" :key="index">
        <el-card class="box-card" style="width: 420px ; margin: 20px">
          <div slot="header" class="clearfix">
            <el-row>
              <el-col :span="12">
                <span>{{ item['studentName'] }}</span>
              </el-col>
              <el-col :span="12" style="text-align: right">
                <span>{{ item['submitTimeRd'] }}</span>
              </el-col>
            </el-row>
          </div>
          <div class="text item">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="感悟:">
                <span>{{ item['evalLog'] }}</span>
              </el-form-item>

              <el-form-item label="图片:">
                <img src="JSON.parse(item['evalPic'])[0].url" class="image" style="width: 160px ;height: 90px">
                <!--              <span>{{ JSON.parse(item['evalPic'])[0].url }}</span>-->
              </el-form-item>

              <el-form-item label="得分:">
                <el-rate
                  v-model=" item['score'] "
                  disabled
                  show-score
                  text-color="#ff9900"
                  :max="10">
                </el-rate>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {StuItemList} from "@/api/bt/student-eval/check/student-eval-item";

export default {
  name: "StudentEvalItem",
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      tableData: undefined,
    };
  },
  methods: {
    //
    stuItem(stuId, itemId) {
      StuItemList(stuId, itemId).then((res) => {
        this.tableData = res.data
        console.log(JSON.parse(res.data[0]['evalPic']))
      })
    },
    init(stuId, itemId) {
      this.drawer = true
      this.stuItem(stuId, itemId);
    },

  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
</style>
<style>
.el-drawer__body {
  overflow: auto;
}
</style>
